<html>

<head>
    <meta charset="utf-8">
    <title>html5 echarts地图分布动画特效</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body style="background:#1B1B1B">
    <!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)-->
    <!--Step:1 为ECharts准备一个具备大小（宽高）的Dom-->

    <div id="main" style="height:100%;width: 100%;">
    </div>
    <!--Step:2 Import echarts.js-->
    <!--Step:2 引入echarts.js-->

    <!--这里的key需要自己去申请-->
    <script
        src="https://webapi.amap.com/maps?v=1.4.8&key=2a5072bcb1b308fb0a64020a0f868016&plugin=AMap.ControlBar"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.min.js"></script>
    <script src="echarts-amap.min.js" charset="UTF-8"></script>

    <script type="text/javascript">

        $(function () {
            var myChart = echarts.init(document.getElementById('main'));
            myChart.setOption({
                title: {
                    text: '模拟迁徙',
                    subtext: '数据纯属虚构',
                    left: 'center',
                    textStyle: {
                        color: '#fff'
                    }
                },
                amap: {
                    maxPitch: 60,
                    pitch: 10, //45 俯仰角
                    viewMode: '3D',
                    zoom: 5.5,
                    expandZoomRange: true,
                    zooms: [3, 20],
                    center: [110, 33], //中心点
                    rotation: 0,  //顺时针旋转角度
                    resizeEnable: true,
                },
                animation: false,
                series: []
            });

            //上面的部分是echarts的配置，需要注意的是amap，这里的配置就是针对 高德地图 的配置了，而支持哪些配置
            //可以去高德地图的开发平台去查看

            var map = myChart.getModel().getComponent('amap').getAMap();
            var layer = myChart.getModel().getComponent('amap').getLayer();

            var series = [
                {
                    "coordinateSystem": "amap",
                    "type": "lines",
                    "zlevel": 1,
                    "effect": {
                        "show": true,
                        "period": 6,
                        "trailLength": 0.7,
                        "color": "red",
                        "symbolSize": 3
                    },
                    "lineStyle": {
                        "normal": {
                            "color": "#a6c84c",
                            "width": 0,
                            "curveness": 0.2
                        }
                    },
                    "data": [
                        {
                            "coords": [
                                [
                                    112.93859, 28.228788
                                ],
                                [
                                    112.935672, 28.245953
                                ]
                            ],
                            "value": 95
                        },
                        {
                            "coords": [
                                [
                                    112.93859, 28.228788
                                ],
                                [
                                    112.92769, 28.228334
                                ]
                            ],
                            "value": 95
                        }
                    ]
                },
                {
                    "coordinateSystem": "amap",
                    "type": "lines",
                    "zlevel": 2,
                    "symbol": [
                        "none",
                        "arrow"
                    ],
                    "symbolSize": 10,
                    "lineStyle": {
                        "normal": {
                            "color": "#a6c84c",
                            "width": 1,
                            "opacity": 0.6,
                            "curveness": 0.2
                        }
                    },
                    "data": [
                        {
                            "coords": [
                                [
                                    112.93859, 28.228788
                                ],
                                [
                                    112.935672, 28.245953
                                ]
                            ],
                            "value": 95
                        },
                        {
                            "coords": [
                                [
                                    112.93859, 28.228788
                                ],
                                [
                                    112.92769, 28.228334
                                ]
                            ],
                            "value": 95
                        }
                    ]
                },
                {
                    "type": "effectScatter",
                    "coordinateSystem": "amap",
                    "zlevel": 2,
                    "rippleEffect": {
                        "brushType": "stroke"
                    },
                    "label": {
                        "normal": {
                            "show": true,
                            "position": "bottom",
                            "formatter": "{b}"
                        }
                    },
                    "itemStyle": {
                        "normal": {
                            "color": "#a6c84c"
                        }
                    },
                    "data": [
                        {
                            "value": [
                                112.935672, 28.245953
                            ]
                        },
                        {
                            "value": [
                                112.92769, 28.228334
                            ]
                        },

                    ]
                }
            ];

            myChart.setOption({
                series: series
            });

            //下面是确保高德地图渲染的时候，echarts同时也需要再次渲染一次，保持位置的同步
            layer.render = function () {
                // let series = myChart.getOption().seriesIndexes;
                // myChart.setOption({
                //     series: []
                // });
                myChart.setOption({
                    series: series
                });

                console.log('当前缩放级别：' + map.getZoom());
                console.log('俯视视角：' + map.getPitch());
                console.log('顺时针：' + map.getRotation());
            }
        });

    </script>

</body>

</html>